<!DOCTYPE html>  
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css" />
<title>用户列表</title>
<script type="text/javascript" src="../js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/user-info.js"></script>
</head>
<body>
<div class="container" style="width: 100%;padding: 25px 15px;">
	<div class="row clearfix">
		<div class="col-md-12 column" style="padding: 20px;">
			<div style="float: left;">
				<a th:href="@{/personnel/addpage}">
					<input type="button" class="btn btn-primary btn" value="添加"/>
				</a>
			</div>
			<form th:action="@{/personnel/showpage}" method="post" id="userForm" role="form" class="form-inline" style="float: right;margin-bottom: 10px;">
				<input type="hidden" id="currentPage" name="currentPage" th:value="${pageBean.currentPage}" />
				<input type="hidden" id="orderedField" name="orderedField" th:value="${pageBean.orderedField}">
				<!-- 后台第一次传来的默认值false，但没有排序属性，无所谓 -->
				<input type="hidden" id="descendFlag" name="descendFlag" th:value="${pageBean.descendFlag}">
				<div class="form-group">
					 <label for="exampleInputPassword1" style="margin-right: 10px;">用户名</label>
					 <input type="text" class="form-control" name="empCondition.username" th:value="${pageBean.empCondition?.username}" placeholder="用户名"/>
				</div>
				<div class="form-group" style="margin-right: 20px;">
					 <label for="exampleInputEmail1" style="margin-right: 10px;">姓名</label>
					 <input type="text" class="form-control" name="empCondition.name" th:value="${pageBean.empCondition?.name}" placeholder="姓名"/>
				</div>
				<div class="form-group" style="margin-right: 20px;">
					 <label for="exampleInputEmail1" style="margin-right: 10px;">生日</label>
					 <input type="text" class="form-control" name="empCondition.birthday" th:value="${pageBean.empCondition?.birthday}" placeholder="按格式输入，如1980-09-01"/>
				</div>
				<div class="form-group" style="margin-right: 20px;">
					 <label for="exampleInputEmail1" style="margin-right: 10px;">手机号</label>
					 <input type="text" class="form-control" name="empCondition.tellphone" th:value="${pageBean.empCondition?.tellphone}" placeholder="手机号"/>
				</div>
				<div class="form-group" style="margin-right: 20px;">
					 <label for="exampleInputEmail1" style="margin-right: 10px;">邮箱</label>
					 <input type="text" class="form-control" name="empConditoin.email" th:value="${pageBean.empCondition?.email}" placeholder="邮箱"/>
				</div>
				<div class="form-group" style="margin-right: 20px;">
					 <label for="exampleInputEmail1" style="margin-right: 10px;">性别</label>
					 <select class="form-control" name="empCondition.gender">
						<option th:selected="${pageBean.empCondition.gender == '男'}" value="男">男</option>
						<option th:selected="${pageBean.empCondition.gender == '女'}" value="女">女</option>
						<option th:selected="${pageBean.empCondition.gender == null}" > </option>
					</select>
				</div>
				<div class="form-group" style="margin-right: 20px;">
					 <label for="exampleInputEmail1" style="margin-right: 10px;">年龄</label>
					 <input type="text" class="form-control text-center" style="width: 50px;height: 30px;" name="beginAge" th:value="${pageBean.beginAge}" placeholder=""/>
					 ~<input type="text" class="form-control text-center" style="width: 50px;height: 30px;" name="endAge" th:value="${pageBean.endAge}" placeholder=""/>
				</div>
				<input type="submit" class="btn btn-primary btn" value="查询">
			</form>
			<table class="table table-bordered" style="margin-top: 20px;">
				<thead>
					<tr>
						<th>姓名</th>
						<th style="width: 100px;">年龄</th>
						<th style="width: 100px;">性别</th>
						<th>手机号</th>
						<th>邮箱</th>
						<th>生日</th>
						<th>
						<button class="btn orderedItem" value="pentrytime" data-toggle="tooltip" title="点击进行升序降序切换">入职日期</button></span></th>
						<th style="width: 100px;">状态</th>
						<th style="width: 200px;">操作</th>
					</tr>
				</thead>
				<tbody th:each="bean : ${pageBean.beanList}" >
					<tr class="success">
							<td>[[${bean.employee.name}]]</td>
							<td>[[${bean.employee.age}]]</td>
							<td>[[${bean.employee.gender}]]</td>
							<td>[[${bean.employee.tellphone}]]</td>
							<td>[[${bean.employee.email}]]</td>
							<td>[[${bean.employee.birthday}]]</td>
							<td>[[${bean.pentrytime}]]</td>
							<td>[[${bean.pstatus}]]</td>
							<td>
								<a th:href="@{/personnel/showone}+'/'+${bean.p_id}+'/show'" class="btn btn-primary btn">详情</a>
								<a th:href="@{/personnel/showone}+'/'+${bean.p_id}+'/modify'" class="btn btn-primary btn">修改</a>
								<a href="javascript:void(0);"  th:onclick="'javascript:userDel(\''+@{/personnel/delete}+'/'+${bean.p_id}+'/'+${bean.employee.id}+'\');'"
									class="btn btn-primary btn">删除</a>
							</td>
					</tr>
				</tbody>
			</table>
			<span>共 [[${pageBean.totalRecord}]] 条记录，
			共 [[${pageBean.totalPage}]] 页，
			当前第<input id="currentPageInput" class="text-center" style="width: 50px;height: 30px;" th:value="${pageBean.currentPage}"/>页。
			<a href="javascript:void(0);" onclick="gotoPage(-2)">跳转</a>
			</span>
			<!-- 分页 -->
			<ul class="pagination" style="float: right;margin: 0;">
				<li><a href="javascript:void(0);" onclick="gotoPage(1)">首页</a></li>
				<li><a href="javascript:void(0);" th:onclick="'javascript:gotoPage('+${pageBean.currentPage}+'-1);'">上一页</a></li>
				<li><a href="javascript:void(0);" th:onclick="'javascript:gotoPage('+${pageBean.currentPage}+'+1);'">下一页</a></li>
				<li><a href="javascript:void(0);" th:onclick="'javascript:gotoPage('+${pageBean.totalPage}+');'">尾页</a></li>
			</ul>
		</div>
	</div>
</div>
</body>
<script type="text/javascript">
	// 条件查询
	function gotoPage(num){
		if(num == -2){
			$("#currentPage").val($("#currentPageInput").val());
		}else{
			$("#currentPage").val(num);
		}
		$("#userForm").submit();
	}
	$(function(){
		 $('[data-toggle="tooltip"]').tooltip();
		$(".orderedItem").click(function(e){
			$("#orderedField").val($(e.target).val());
			if($("#descendFlag").val()==null || $("#descendFlag").val()=="true"){
				$("#descendFlag").val(false);
			}else{
				$("#descendFlag").val(true);
			};
			$("#userForm").submit();
		});
	});
</script>
</html>